Nesting Grids in Practice

In the screencast below you’ll see how nesting grids works in practice, and how a nested grid can be used to make a simple image gallery.

Nesting CSS grids is simple and can be done simply by using the display:grid rule for both a parent and child element.

Here is how that could look with real code:

.container {
  display:grid;
  // ...
}

#one {
  display:grid
}

In this section we covered how to nest grids to make creative layouts for the web, and how CSS grid can be used to create an easy photo gallery for a website or blog.